<template>
    <div className="basic-table">
        <basic-container>
            <el-table
                    :data="tableData"
                    fit
                    stripe
                    empty-text="暂无数据"
                    style="width: 100%">
                <el-table-column
                        prop="position"
                        label="职位名称"
                        align="center"
                        sortable
                        header-align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleShowPosition(scope.$index, scope.row)">
                            {{scope.row.position}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="人才姓名"
                        align="center"
                        sortable
                        header-align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleShowResume(scope.$index, scope.row)">
                            {{scope.row.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="liveCity"
                        label="所在城市"
                        align="center"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="联系方式"
                        align="center"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="pubtime"
                        label="推荐时间"
                        align="center"
                        sortable
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="进展"
                        align="center"
                        header-align="center"
                        >
                    <template slot-scope="scope">
                        <el-tag close-transition
                        :type="getStatus(scope.row.status).type">
                            {{getStatus(scope.row.status).text}}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <br/>
            <el-row type="flex" justify="center">
                <el-pagination
                        style="align-self:center"
                        background
                        layout="prev, pager, next"
                        :current-page="currentPage"
                        :page-count="totalPage"
                        @current-change="changePage">
                </el-pagination>
            </el-row>
            <el-dialog title="查看职位信息" :visible.sync="dialogFormVisible">
                <el-table
                        :data="tablePositionData"
                        stripe
                        style="width: 100%;">
                    <el-table-column
                            prop="company"
                            label="公司名称"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="职位名称"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="cityName"
                            label="工作地点"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="职位简介"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="payment"
                            label="伯乐报酬"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="lietouName"
                            label="猎头姓名"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="lietouMobile"
                            label="猎头联系方式"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="发布时间"
                            align="center"
                            header-align="center">
                    </el-table-column>
                </el-table>
            </el-dialog>
            <el-dialog title="查看人才信息" :visible.sync="dialogFormVisible2">
                <el-table
                        :data="tableData2"
                        stripe
                        style="width: 100%;">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="liveCity"
                            label="人才所在城市"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="mobile"
                            label="联系方式"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="邮箱"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column
                            prop="position"
                            label="期望职位"
                            align="center"
                            header-align="center">
                    </el-table-column>
                    <el-table-column label="操作"
                                     align="center"
                                     header-align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="success"
                                    @click="showResumeFile(scope.$index, scope.row)">查看简历
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
    import BasicContainer from '@vue-materials/basic-container'
    import axios from 'axios'
    import Config from '@myconfig/config.min'


    export default {
        components: {BasicContainer},
        name: 'BasicTable',
        data() {
            return {
                currentPage:1,
                totalPage: 10,
                tableData: [],
                dialogFormVisible: false,
                dialogFormVisible2:false,
                tablePositionData: [{
                    company: '',
                    name: '',
                    cityName: '',
                    description: '',
                    payment: '',
                    createTime: '',
                    lietouName: ''
                }],
                tableData2:[{
                    id: '',
                    name: '',
                    liveCity: '',
                    mobile: '',
                    position: '',
                    email: ''
                }]
            }
        },
        computed: {
            },
        methods: {
            getStatus(i){
                return [
                    {type: "info", text: "待审核"},
                    {type: "", text: "已审核"},
                    {type: "", text: "已推荐"},
                    {type: "", text: "已面试"},
                    {type: "", text: "已发Offer"},
                    {type: "", text: "已入职"},
                    {type: "danger", text: "已淘汰"},
                    {type: "success", text: "已结算"}
                ][i]
            },
            getData(currentPage) {
                let _this = this;
                axios({
                    method: 'get',
                    url: Config.baseUrl + "/api/bole/pr/all/"+ currentPage,
                }).then(function (response) {
                    _this.tableData = response.data.list;
                    console.log(_this.tableData)
                    _this.totalPage = response.data.pages
                })
            },
            changePage:function(currentPage){
                this.getData(currentPage)
            },
            handleShowPosition(index,row) {
                this.dialogFormVisible = true;
                this.tablePositionData[0].lietouName = row.lietou;
                this.tablePositionData[0].lietouMobile = row.lietouMobile;
                let _this = this;
                axios({
                    method: 'get',
                    url: Config.baseUrl + "/api/position/"+ row.positionId,
                }).then(function (response) {
                    if (response.data.code!=1) {
                        _this.$notify({
                            title: '获取详情失败',
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                    else {
                        _this.tablePositionData[0].company = response.data.data.company;
                        _this.tablePositionData[0].name = response.data.data.name;
                        _this.tablePositionData[0].cityName = response.data.data.cityName;
                        _this.tablePositionData[0].description = response.data.data.description;
                        _this.tablePositionData[0].payment = response.data.data.payment;
                        _this.tablePositionData[0].createTime = response.data.data.createTime.substring(0,8);
                    }
                })
            },
            handleShowResume(index, row) {
                this.getResumeData(row.resumeId);
                this.dialogFormVisible2 = true;
            },
            getResumeData(resumeId) {
                let _this = this;
                axios({
                    method: 'get',
                    url: Config.baseUrl + "/api/resume/"+ resumeId,
                }).then(function (response) {
                    if (response.data.code != 1) {

                    } else {
                        _this.tableData2[0].id = response.data.data.id;
                        _this.tableData2[0].name = response.data.data.name;
                        _this.tableData2[0].liveCity = response.data.data.liveCity;
                        _this.tableData2[0].position = response.data.data.position;
                        _this.tableData2[0].mobile = response.data.data.mobile;
                        _this.tableData2[0].email = response.data.data.email;
                    }
                })
            },
            showResumeFile(index, row) {
                window.open(Config.baseUrl+ "/api/resume/file/"+row.id);
            }
        },
        mounted() {
            this.getData(1);
        }
    }
</script>

<style>
    .basic-table {

    }
</style>
